<template>
	<view class="content">
		<view class="titel">
			定位城市
		</view>
		<view>
			<view class="city active">
				<view class="uni-icon">&#xe650;</view> 湘潭
			</view>
		</view>
		<view class="titel zc">
			支持的城市
		</view>
		<view class="cityList">
			<view class="city">
				湘潭
			</view>
			<view class="city">
				长沙
			</view>
			<view class="city">
				株洲
			</view>
			<view class="city">
				湘潭
			</view>
			<view class="city">
				长沙
			</view>
			<view class="city">
				株洲
			</view>
			<view class="city">
				湘潭
			</view>
			<view class="city">
				长沙
			</view>
			<view class="city">
				株洲
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'city',
		data: function () {
			return {

			};
		}
	}
</script>

<style scoped>
	page {
		background: #FFFFFF;
	}

	.content {
		padding: 40px 30px;
	}

	.titel {
		font-size: 34px;
		color: #555;
		margin: 20px 0 30px;
	}

	.zc {
		margin-top: 60px;
	}

	.cityList {
		display: flex;
		flex-wrap: wrap;
	}

	.cityList .city {
		margin: 10px;
	}

	.city {
		padding: 15px 0;
		width: 150px;
		text-align: center;
		border: 1px solid #339933;
		border-radius: 25px;
	}

	.active {
		background: #339933;
		color: #fff;
	}
</style>
